<template>
    <div id="m_release">
        <div id="release">
            <div class="release_con">
                <div style="display: flex;justify-content: space-between;width: 400px;">
                    <!-- <div class="release_btn" >检测是否在线</div> -->
                    <div>
                        <el-button type="success" icon="Select" @click="CheckLine()">检测是否在线</el-button>
                        <el-checkbox v-model="m_noshowip0" style="padding-left: 20px;" @change="f_showIP0"
                            label="显示设备IP为0的设备" size="large" />
                    </div>
                </div>
            </div>
        </div>

        <div class="release_table">
            <!-- <el-button type="success" @click="TakeApply()" size="small" style="margin-bottom: 10px;">提交申请</el-button> -->
            <el-table id="out" :data="tableData" border stripe style="width: 100%" @selection-change="setSelectmoudle">
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column prop="time" label="位置" width="130">
                    <template #default="scope">
                        <div v-if="!scope.row.stake">
                            暂无位置信息
                        </div>
                        <div v-else>
                            {{ f_GetZH(scope.row.stake) }} {{ scope.row.direction ? scope.row.direction.value == '1' ?
                                '↓' : '↑' : '' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="200" />
                <!-- <el-table-column align="center" label="状态" width="70">
                    <template #default="scope">
                        <el-icon color="#00ff00" v-show="scope.row.last_send_complete">
                            <CircleCheckFilled />
                        </el-icon>
                        <el-icon color="#eb4560" v-show="!scope.row.last_send_complete">
                            <WarningFilled font-size="20px" />
                        </el-icon>
                    </template>
                </el-table-column> -->
                <el-table-column align="center" label="是否在线" width="90">
                    <template #default="scope">
                        <img :src="scope.row.online == 1 ? './img/zx_ico.png' : './img/zx_icol.png'" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="类型" width="100">
                    <template #default="scope">
                        <div>{{ scope.row.model ? scope.row.model.label : '' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="尺寸" width="80">
                    <template #default="scope">
                        <div> {{ scope.row.width + "*" + scope.row.height }}
                        </div>
                    </template>
                </el-table-column>
                
                <el-table-column prop="content" label="内容">
                    <template #default="scope">
                        <div ref="scroolArea"
                            style="display: flex;justify-content: space-around;position: relative;height: 26px;align-items: center;">
                            <div class="m_area" style="position: absolute;width: 100%;">
                                <span class="m_content" v-for="(item, index) in scope.row.playList"
                                    :style="{ color: formatColor(item.font_color) }">
                                    {{ item.content }}
                                </span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="IP" width="140">
                    <template #default="scope">
                        <div>
                            {{ scope.row.ip }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="ip" label="厂家" width="120">
                    <template #default="scope">
                        <div>{{ scope.row.factory.label }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <div>
                            <el-button v-if="scope.row.applying" size="default" :icon="Promotion"
                                type="info">审核中</el-button>
                            <el-button v-else="scope.row.applying==false" size="default" :icon="Promotion" type="primary"
                                @click="changeBoard(scope.row)">编辑</el-button>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="历史记录" width="120">
                    <template #default="scope">
                        <div>
                            <el-button size="default" type="danger" :icon="DocumentCopy"
                                @click="getHistory(scope.row)">历史</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="设备亮度" width="120">
                    <template #default="scope">
                        <div>
                            <el-button size="default" type="success" :icon="Sunny"
                                @click="getDeviceState(scope.row, 'light')">亮度</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="设备自检">
                    <template #default="scope">
                        <div>
                            <el-button size="default" type="warning" :icon="Operation"
                                @click="getDeviceState(scope.row, 'check')">自检</el-button>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column type="selection" label="选择" /> -->
            </el-table>
        </div>
        <el-dialog v-model="HisDlg" title="历史记录" width="50%" align-center>
            <div class="historyList">
                <!-- <el-button type="primary" size="small" style="margin-bottom: 10px;" @click="republis()">重新发布</el-button> -->
                <el-table :data="HisList" border style="width: 100%" @selection-change="setSelectRows">
                    <el-table-column type="index" label="序号" width="80" />
                    <el-table-column label="发布内容">
                        <template #default="scope">
                            <div :style="{ color: formatColor(scope.row.font_color) }">{{ scope.row.content }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间" width="280">
                        <template #default="scope">
                            <div>{{ scope.row.gmt_modified }}</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column type="selection" label="选择" /> -->
                    <!-- <el-table-column></el-table-column> -->
                </el-table>
                <pagination style="margin-top: 10px;" @sendsize="getsize" @sendpage="getpage" :page="page"></pagination>
            </div>
        </el-dialog>
        <el-dialog v-model="StateDlg" :title="StateTitle" width="550" align-center>
            <div v-show="StateTitle == '设备亮度'">
                <div style="display: flex;align-items: center;justify-content: flex-start;">
                    <div style="width: 120px;padding-left: 30px;">设备亮度：</div>
                    <div style="width: 380px;">
                        <el-slider v-model="Lightvalue" :min="1" :max="32" :step="1" />
                    </div>
                </div>
            </div>
            <div v-show="StateTitle == '设备自检'">
                <div>
                    <div class="stateItem">
                        <div style="text-align: right;width: 30%;">连接状态：</div>
                        <div :class="stateObj.connect ? 'success' : 'error'">{{ stateObj.connect ? '正常' : '错误' }}</div>
                    </div>
                    <div class="stateItem">
                        <div style="text-align: right;width: 30%;">设备IP：</div>
                        <div>{{ stateObj.ip }}</div>
                    </div>
                    <div class="stateItem">
                        <div style="text-align: right;width: 30%;">端口号：</div>
                        <div>{{ stateObj.port }}</div>
                    </div>
                    <div class="stateItem">
                        <div style="text-align: right;width: 30%;">屏幕开启状态：</div>
                        <div :class="stateObj.screenState ? 'success' : 'error'">{{ stateObj.screenState ? '开启' : '关闭' }}
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="StateDlg = false">取消</el-button>
                    <el-button type="primary" @click="sureSetState">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

    <el-dialog v-model="m_lddialogVisible" title="设置亮度" width="400">
        <div class="slider-demo-block">
            <el-slider v-model="Lightvalue" show-input max="32" />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="f_SetLDAuto()">自动亮度</el-button>
                <el-button @click="m_lddialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="f_SetLD()">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import FileSaver from "file-saver";
import * as XLSX from 'xlsx';
import $sys from '../../api/sys';
import { ElMessage, ElMessageBox } from 'element-plus';
import { mainStore } from "../../store/index";
import pagination from '../../components/pagination.vue';
import { Promotion, DocumentCopy, Select, Sunny, Operation } from '@element-plus/icons-vue';
const scroolArea = ref(null);
const HisDlg = ref(false);
const m_noshowip0 = ref(true);
const m_lddialogVisible = ref(false);

function f_showIP0() {
    localStorage.setItem("showip0", m_noshowip0.value);
    getDeviceList();
}

const HisList = ref([]);
const $store = mainStore();
const page = reactive({
    pagenum: 1,
    pagesize: 10,
    total: 0
})
watch(() => $store.InfoboradDlg, (nv, ov) => {
    getDeviceList();
})
onMounted(() => {
    //localStorage.setItem("showip0",m_noshowip0.value);
    var ishow = localStorage.getItem("showip0");
    if (ishow) {
        if (ishow == "false") {
            m_noshowip0.value = false;
        }
    }
    getDeviceList();
})
function f_GetZH(zh) {
    var m_zh = parseInt(zh);
    if (zh - m_zh == 0) {
        return "K" + m_zh + "+000";
    }
    else {
        var bmz = parseInt((zh - m_zh) * 1000) + "";
        if (bmz.length == 1) {
            bmz = "00" + bmz;
        }
        else if (bmz.length == 2) {
            bmz = "0" + bmz;
        }
        return "K" + m_zh + "+" + bmz;
    }
}
const moudleList = ref([]);
function setSelectmoudle(e) {
    moudleList.value = [];
    e.forEach((item, index) => {
        moudleList.value.push(item.id);
    })
}
function TakeApply() {
    // console.log(moudleList);
    if (moudleList.value.length == 0) {
        ElMessage({
            message: '请选择需要提交发布的情报板!',
            type: 'warning'
        })
    } else {
        let obj = {};
        obj.device_ids = moudleList.value;
        $sys.ApplyAdd(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '提交申请成功!',
                    type: 'success'
                })
            }
        })
    }
}
const selectHis = ref([]);
function setSelectRows(e) {
    selectHis.value = [];
    e.forEach((item, index) => {
        selectHis.value.push(item.id);
    })
}
function republis() {
    if (selectHis.value.length == 0) {
        ElMessage({
            message: '请选择需要重新发布的记录',
            type: 'warning'
        })
    } else {
        ElMessageBox.confirm(
            '确定重新发布这些信息吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let obj = {};
            obj.ids = selectHis.value;
            $sys.republishHis(obj).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '重新发布成功',
                        type: 'success'
                    })
                    HisDlg.value = false;
                    getDeviceList();
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'error'
                    })
                }
            })
        })
    }
}
function formatColor(string) {
    const r = string.substring(0, 3);
    const g = string.substring(3, 6);
    const b = string.substring(6, 9);
    const a = string.substring(9, 12);
    return `rgba(${r},${g},${b},1)`;
}
function getsize(e) {
    page.pagesize = Number(e);
    let obj = {};
    obj.id = d_id.value;
    getHistory(obj);
}
function getpage(e) {
    page.pagenum = Number(e);
    let obj = {};
    obj.id = d_id.value;
    getHistory(obj);
}
const d_id = ref('');
const StateDlg = ref(false);
const StateTitle = ref('');
const Lightvalue = ref(0);
const stateObj = ref({});
const dev_xinghao = ref("sunway");

function sureSetState() {
    if (StateTitle.value == '设备亮度') {
        ElMessageBox.confirm(
            '确定重置设备亮度吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let obj = {};
            obj.device_id = d_id.value;
            obj.brightness = Lightvalue.value;
            $sys.setLight(obj).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '重置设备亮度成功',
                        type: 'success'
                    })
                    Lightvalue.value = 0;
                    StateDlg.value = false;
                    getDeviceList();
                }
            })
        }).catch(() => {

        })
    } else {
        StateDlg.value = false;
    }
}

//设置亮度
function f_SetLD() {
    let obj = {};
    obj.device_id = d_id.value;
    obj.brightness = Lightvalue.value;
    $sys.setLight(obj).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: '操作成功！',
                type: 'success'
            })
            Lightvalue.value = 0;
            m_lddialogVisible.value = false;
            getDeviceList();
        }
    })
}

//自动亮度
function f_SetLDAuto() {
    let obj = {};
    obj.device_id = d_id.value;
    obj.brightness = Lightvalue.value;
    $sys.setLightAuto(obj).then(res => {
        console.log(111, res);
        if (res.code == 200) {
            ElMessage({
                message: '操作成功！',
                type: 'success'
            })
            Lightvalue.value = 0;
            m_lddialogVisible.value = false;
            getDeviceList();
        }
    })
}




function getDeviceState(e, type) {

    if (e.factory.value != null && e.factory.value == "dianming") {
        dev_xinghao.value = "dianming";
    }
    //console.log(111,e);
    d_id.value = e.id;
    if (type == 'light') {
        StateTitle.value = '设备亮度';
        $sys.getLight(e.id).then(res => {
            if (res.code == 200) {
                Lightvalue.value = res.data;
                //alert(Lightvalue.value);
                m_lddialogVisible.value = true;
            }
        })

        // alert(Lightvalue.value);
    } else {
        StateTitle.value = '设备自检';
        $sys.getBBSStatus(d_id.value).then(res => {
            console.log(111, res);
            if (res.code == 200) {
                stateObj.value.connect = true;
                stateObj.value.ip = e.ip;
                stateObj.value.port = e.port;
                stateObj.value.screenState = true;
                StateDlg.value = true;
            }
        })
    }


}

function getHistory(e) {
    d_id.value = e.id;
    page.device_id = e.id
    $sys.getHisList(page).then(res => {
        if (res.code == 200) {
            HisList.value = res.data.result;
            page.total = res.data.count
            HisDlg.value = true;
        }
    })
}
function changeBoard(e) {
    localStorage.setItem('boardid', e.id);
    localStorage.setItem('IsApply', 0);
    $store.InfoboradID = e.id;
    setTimeout(() => {
        $store.InfoboradDlg = true;
    }, 50)
}
const IDarray = ref([]);
function getDeviceList() {
    $sys.deviceList().then(res => {
        if (res.code == 200) {
            tableData.value = [];
            if (m_noshowip0.value) {
                tableData.value = res.data;
            }
            else {
                var temp = [];
                res.data.forEach(item => {
                    if (item.ip != "0") {
                        temp.push(item);
                    }
                    else {
                        console.log(111, item);
                    }
                });
                tableData.value = temp;
            }
        }
    })
}
function getDeviceContent(item) {
    $sys.getInfoContent(item.id).then(res => {
        item.content = res.data;
        tableData.value.push(item);
    })
}
function CheckLine() {
    $sys.checkIsOnline().then(res => {
        ElMessage({
            message: '操作进行中...!',
            type: 'success'
        });
        if (res.code == 200) {
            $sys.devicecount().then(res => {
                if (res.code == 200) {
                    $store.total = res.data.total;
                    $store.online = res.data.online;
                    $store.offline = res.data.offline;
                }
            })
            getDeviceList();
            ElMessage({
                message: '操作成功!',
                type: 'success'
            })
        }
    })
}
const tableData = ref([])
const exporExcel = (title) => {
    var wb = XLSX.utils.table_to_book(
        document.querySelector("#out")
    );
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: 'array',
    });
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }),
            title + ".xlsx"
        );
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
    }
    return wbout;
};
</script>

<style scoped>
.el-table--fit {
    border-bottom: 1px #263342 solid;
}

:deep(.el-button--small span) {
    font-size: 12px !important;
}

.m_area {
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;
}

:deep(*) {
    font-size: 16px;
}

.m_content {
    margin-left: 5px;
}

#release {
    background-color: #2F4052;
    width: 100%;
    padding: 0 20px;
}

:deep(thead .el-checkbox__inner) {
    display: none;
}

:deep(.el-dialog) {
    background-color: #2F4052 !important;
}

:deep(.el-dialog__title),
:deep(.el-dialog__body) {
    color: white !important;
}

:deep(.el-scrollbar__wrap--hidden-default) {
    background-color: #2F4052;
}

.release_con {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    height: 70px;
}

.release_btn {
    color: #17DD27;
    line-height: 30px;
    background-color: #44596E;
    padding: 0 12px;
    border-radius: 3px;
    cursor: pointer;
}

.release_table {
    padding: 10px;
    background-color: #2F4052;

    overflow: auto;
    width: 100%;
}

.release_table::-webkit-scrollbar {
    width: 5px;
}

.release_table::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 设置滚动条的颜色 */
    border-radius: 6px;
    /* 设置滚动条的圆角 */
}

.release_table::-webkit-scrollbar-track {
    background-color: #888;
    border-radius: 6px;
    /* 设置滚动条的轨道颜色 */
}

.stateItem {
    display: flex;
    line-height: 30px;
}

.success {
    color: #27fc27;
}

.error {
    color: #ff3f3f;
}
</style>

<style lang='less'>
#m_release {

    .el-scrollbar__view {
        height: calc(100vh - 310px);
        border-bottom: 1px #263342 solid;
    }

    .el-message-box {
        background-color: #2f4052 !important;
    }

    .el-message-box__message,
    .el-message-box__title {
        color: #fff;

    }

    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background: none;
    }

    .el-table__inner-wrapper {
        &::before {
            display: none;
        }
    }

    // 头部样式
    .el-table__header-wrapper th {
        background-color: #2F4052;
        color: #fff;
    }

    // 内容行样色
    .el-table__row {
        background-color: #2F4052;
        color: #B2C9EE;
    }

    // 内容行边框
    .el-table__cell {
        border: 1 !important;
        border-color: #222e3b;
    }

    .el-table--border .el-table__inner-wrapper:after,
    .el-table--border:after,
    .el-table__border-left-patch {
        background-color: #263342;
    }

    //自定义斑马线和鼠标移入样式
    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
        background-color: #263343 !important;
    }

    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
        background-color: #2F4052 !important;
    }

    .el-table__body tr:nth-child(even) {
        background-color: #263343;
        /* 偶数行（斑马线）的默认背景色 */
    }

    .slider-demo-block {
        max-width: 600px;
        display: flex;
        align-items: center;
    }

    .slider-demo-block .el-slider {
        margin-top: 0;
        margin-left: 12px;
    }

}
</style>